<template>
    <common-table :url="url" :dataSource="dataSource" :columns="columns" @submit="submit" @reload="reload">
        <template #bodyCell="{ column, text, open }">
            <template v-if="column.key == 'action'">
                <a-space>
                    <a-space>
                        <a @click="open(true)"> 编辑 </a>
                        <a> 删除 </a>
                    </a-space>
                </a-space>
            </template>
            <template v-if="column.key == 'name'">
                <a>{{ text }}</a>
            </template>
        </template>

        <template #editor="{ form }">
            <a-form layout="vertical">
                <a-form-item v-for="item in f_column" :key="item.key" :label="item.title">
                    <a-input v-model:value="form[item.dataIndex]"></a-input>
                </a-form-item>
            </a-form>
        </template>
    </common-table>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from "vue";
import CommonTable from "../common-table/index.vue";
import { submitApi } from "@/api/form/index";

export default defineComponent({
    components: {
        CommonTable,
    },
    props: {
        columns: Array,
        submitUrl: String,
        url: String,
    },
    setup(props, { emit }) {
        const submit = (form: any, close: Function) => {
            if (!props.submitUrl) {
                console.error("submitUrl is undefind");
                return;
            }

            submitApi(props.submitUrl, form).then((res) => {
                console.log(res);
                close();
            });
        };

        const dataSource = ref([]);

        const reload = (res: any) => {
            dataSource.value = res.data;
        };

        const f_column = computed(
            () =>
                props.columns &&
                props.columns.filter((c: any) => c.key != "action")
        );

        return {
            dataSource,
            f_column,

            submit,
            reload,
        };
    },
});
</script>
